| Form 表单 | 您所在的位置：网站首页 › admin form › Form 表单 |
Form 表单
|
Form 表单 # 表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。 TIP Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。 典型表单 #最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。 TIP W3C 标准定义： 当一个表单中只有一个单行文本输入字段时， 用户代理人应该在该字段中接受输入作为提交表单的请求。 如果希望阻止这一默认行为，可以在 标签上添加 @submit.prevent。 行内表单 #当垂直方向空间受限且表单较简单时，可以在一行内放置表单。 对齐方式 #根据你们的设计情况，来选择最佳的标签对齐方式。 表单校验 #Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。 自定义校验规则 #这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。 TIP 自定义的校验回调函数必须被调用。 更多高级用法可参考 async-validator。 添加/删除表单项 #数字类型验证 #TIP 当一个 el-form-item 嵌套在另一个 el-form-item时，其标签宽度将是 0。 如果需要可以为 el-form-item 单独设置 label-width 属性。 尺寸控制 #表单中的所有子组件都继承了该表单的 size 属性。 同样，form-item 也有一个 size 属性。 无障碍 #当在 el-form-item 内只有一个输入框（或相关的控制部件，如选择或复选框），表单项的标签将自动附加在那个输入框上。 然而，如果同时有多个输入框在 el-form-item内， 表单项将被分配为 WAI-ARIA 组 的角色。 在这种情况下，需要手动给每个 input 指定访问标签。 Form API #Form Attributes #属性名说明类型默认值model表单数据对象object—rules表单验证规则object—inline行内表单模式booleanfalselabel-position表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性enumrightlabel-width标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。string / number—label-suffix表单域标签的后缀string—hide-required-asterisk是否隐藏必填字段标签旁边的红色星号。booleanfalserequire-asterisk-position星号的位置。enumleftshow-message是否显示校验错误信息booleantrueinline-message是否以行内形式展示校验信息booleanfalsestatus-icon是否在输入框中显示校验结果反馈图标booleanfalsevalidate-on-rule-change是否在 rules 属性改变后立即触发一次验证booleantruesize用于控制该表单内组件的尺寸enum—disabled是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性booleanfalsescroll-to-error当校验失败时，滚动到第一个错误表单项booleanfalseForm Methods #方法名说明类型validate对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。(callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => PromisevalidateField验证具体的某个字段。(props?: Arrayable, callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => PromiseresetFields重置该表单项，将其值重置为初始值，并移除校验结果(props?: Arrayable) => voidscrollToField滚动到指定的字段(prop: FormItemProp) => voidclearValidate清理某个字段的表单验证信息。(props?: Arrayable) => voidForm Events #事件名说明类型validate任一表单项被校验后触发FunctionForm Exposes #名称说明类型validate对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。FunctionvalidateField验证具体的某个字段。FunctionresetFields重置该表单项，将其值重置为初始值，并移除校验结果FunctionscrollToField滚动到指定的字段FunctionclearValidate清理某个字段的表单验证信息。FunctionForm Slots #属性名说明子标签defaultcustomize default contentFormItemFormItem API #FormItem Attributes #名称说明类型默认值propmodel 的键名。 它可以是一个路径数组(例如 ['a', 'b', 0])。 在定义了 validate、resetFields 的方法时，该属性是必填的string / string[]—label标签文本string—label-width标签宽度，例如 '50px'。 可以使用 auto。string / number—required是否为必填项，如不设置，则会根据校验规则确认booleanfalserules表单验证规则, 具体配置见下表, 更多内容可以参考async-validatorobject—error表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息。string—show-message是否显示校验错误信息booleantrueinline-message是否在行内显示校验信息booleanfalsesize用于控制该表单域下组件的默认尺寸enumdefaultfor和原生标签相同能力string—validate-statusformitem 校验的状态enum—FormItemRule #插槽名说明类型默认trigger验证逻辑的触发方式enum—TIP 如果您不想根据输入事件触发验证器， 在相应的输入类型组件上设置 validate-event 属性为 false (, , , . ……). FormItem Slots #名称说明类型default表单的内容。—label标签位置显示的内容objecterror验证错误信息的显示内容objectFormItem Exposes #名称描述类型size表单项大小objectvalidateMessage校验消息objectvalidateState校验状态objectvalidate验证表单项FunctionresetField对该表单项进行重置，将其值重置为初始值并移除校验结果FunctionclearValidate移除该表单项的校验结果Function源代码 #组件 • 文档 贡献者 # 三咲智子 Jeremy 云游君 btea Delyan Haralanov Xc 류한경 msidolphin kooriookami qiang zz Zhongxiang Wang C.Y.Kun Aex wangbincyzj 921 niuxinyu Qiang hminghe Hefty opengraphica LYlanfeng ntnyq 辛宝Otto 波比小金刚 Herrington Darkholme Robert Schönthal SongWuKong Taosh bqy_fe Ryan2128 Alan Wang qige2016 on the field of hope Hades-li jiangyeka assasin0076 achin797 啝裳 Soul guizo virgosoy
|
【本文地址】